<?php echo $header; ?>
<div id="content">
  <div class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
    <?php } ?>
  </div>
  <?php if ($error_warning) { ?>
  <div class="warning"><?php echo $error_warning; ?></div>
  <?php } ?>
  <div class="box">
    <div class="heading">
      <h1><img src="view/image/order.png" alt="" /> <?php echo $heading_title; ?></h1>
      <div class="buttons"><a onclick="$('#form').submit();" class="button"><?php echo $button_save; ?></a><a href="<?php echo $cancel; ?>" class="button"><?php echo $button_cancel; ?></a></div>
    </div>
    <div class="content">
      <div id="tabs" class="htabs"><a href="#tab-data"><?php echo $tab_data;?></a><a href="#tab-comments"><?php echo $tab_comments;?></a></div>
      <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
        <div id="tab-data">
            <table class="form">
              <tr>
                <td><span class="required">*</span> <?php echo $text_number; ?></td>
                <td><input type="text" name="number" value="<?php echo $phone['number'];?>" size="50"/></td>
              </tr>
              <tr>
                <td><?php echo $text_location; ?></td>
                <td><input type="text" name="location" value="<?php echo $phone['location'];?>" size="50"/></td>
              </tr>
              <tr>
                <td><?php echo $text_total_search; ?></td>
                <td><?php echo $phone['total_search'];?></td>
              </tr>
              <tr>
                <td><?php echo $text_total_comments; ?></td>
                <td><?php echo $phone['total_comments'];?></td>
              </tr>
              <tr>
                <td><?php echo $text_created; ?></td>
                <td><?php echo $phone['created'];?></td>
              </tr>
            </table>
        </div>
        <div id="tab-comments">
        	<div class="paging">
        	<?php echo $page?>
        	<select id="page">
        		<?php for($i = 1; $i <= $total; $i++){?>
        		<option value="<?php echo $i;?>"><?php echo $i;?></option>
        		<?php }?>
        	</select>
        	</div>
          <table id="comments" class="list">
            <thead>
              <tr>
                <td style="width: 20%" class="left"><?php echo $column_nick; ?></td>
                <td style="width: 45%" class="left"><?php echo $column_comment; ?></td>
                <td style="width: 15%" class="left"><?php echo $column_call_type; ?></td>
                <td style="width: 15%" class="left"><?php echo $column_ip; ?></td>
                <td style="width: 10%" class="left"><?php echo $column_rate; ?></td>
                <td style="width: 10%" class="left"><?php echo $column_created; ?></td>
              </tr>
            </thead>
			<tbody>
			</tbody>
          </table>
        </div>
      </form>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
$('#tabs a').tabs();
$("#page").change(function(){
	viewPage();
});

function viewPage(){
	var url = 'index.php?route=phone/number/json&token=<?php echo $token; ?>&phone_id=<?php echo $this->request->get['phone_id']?>&page=' + $("#page option:selected").val();
	$.getJSON(url, function(data){
		$("table#comments tbody").html("");
	
		for(var i = 0; i < data.length; i++)
		{
			$("table#comments tbody").append(
					"<tr>"
					+ "<td>"+data[i].nickname+"</td>"
					+ "<td>"+data[i].comment+"</td>"
					+ "<td>"+data[i].call_type+"</td>"
					+ "<td>"+data[i].ip+"</td>"
					+ "<td>"+data[i].rate+"</td>"
					+ "<td>"+data[i].created+"</td>"
					+ "</tr>"
			);
		}
	});
}

viewPage();
-->
</script>
<style>
.paging{
	text-align: right;
}
table#comments thead td, table#comments tbody td {
	padding: 10px 5px;
}
table#comments tbody td{
	vertical-align: top;
}
</style>
<?php echo $footer; ?>